<!DOCTYPE html>
<html>
<head>
    <!--合拍榜单-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <style>
        .detail .content {
            background-color: #fff;
            padding-bottom: 25px;
        }

        .detail .content .detail-title {
            margin: 15px 0 0 15px;
            height: 100px
        }

        .detail .content .detail-title .head_pic img {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            margin-right: 10px
        }

        .detail .content .detail-title .title {
            padding: 5px 0 10px;
            color: #508DC1;
            font-weight: 700;
            font-size: 0.875rem
        }

        .detail .content .detail-title a > img {
            width: 13px;
            margin-right: 5px;
        }

        .detail .content .detail-title p:last-child {
            margin: 5px 0 20px;
            font-size: 0.875rem;
            color: #7a7a7a
        }

        .detail .content .btn-group {
            margin-left: 15px;
            font-size: 0.75rem
        }

        .detail .content .btn-group a:first-child {
            padding: 10px 15px;
            background: #59B659;
            border-radius: 3px;
            color: white;
        }

        .detail .content .btn-group a:last-child {
            padding: 10px 15px;
            background: #337AB7;
            border-radius: 3px;
            color: white;
        }

        .detail .tabs {
            margin-top: 10px;
            width: 100vw
        }

        .detail .tabs .tabs-name a {
            font-size: 0.875rem;
            display: inline-block;
            padding: 15px 15px;
            background-color: #f5f5f5;
        }

        .detail .tabs .tabs-name a:focus,
        .detail .tabs .tabs-name a.actives {
            background-color: #fff;
        }

        .detail .tabs .tabs-con {
            background: white;
            overflow: hidden
        }

        .detail .simple-info {
            display: none;
        }

        .detail .simple-info ul {
            margin-left: 15px;
        }

        .detail .simple-info ul li {
            font-size: 0.875rem;
            margin: 20px 0
        }

        .detail .simple-info ul li:first-child {
            color: #979797
        }

        .detail .simple-info ul li:nth-child(2) {
            color: #4B89BF;
        }

        .detail .simple-info ul li:nth-child(3) {
            color: black;
        }

        .detail .simple-info ul li:nth-child(4) {
            color: #979797;
        }

        .detail .simple-info ul li:nth-child(4) div {
            margin-top: 15px;
            color: black
        }

        .detail .detail-list {
            display: none;
        }

        .detail .detail-show {
            display: block;
        }

        .detail .detail-list ul li {
            padding: 15px 15px 10px 15px;
            border-bottom: 1px solid #F2F2F2;
        }

        .detail .detail-list ul li:first-child {
        }

        .detail .detail-list ul li:first-child span {
            margin-right: 6px;
            color: #4B89BF;
            font-size: 0.875rem;
            display: inline-block
        }

        .detail .detail-list .author a img {
            height: 2.5rem;
            width: 2.5rem;
            border-radius: 50%;
            float: left;
            margin: 0 10px 0 0;
        }

        .detail .detail-list .author .account-name {
            font-size: 0.875rem;
            color: black
        }

        .detail .detail-list .author .account-name img {
            width: 0.875rem;
        }

        .detail .detail-list .author .profession {
            font-size: 0.625rem;
            color: #979797;
            margin-top: 5px;
            margin-bottom: 5px
        }

        .detail .detail-list .dynamic-con p:first-child {
            font-size: 0.875rem;
            color: black;
            margin-top: 15px;
        }

        .detail .detail-list .dynamic-con p {
            margin: 10px 0;
        }

        .detail .detail-list .dynamic-con p:first-child span {
            font-size: 0.75rem;
            color: #979797;
            margin-top: 15px;
            margin-left: 5px;
        }

        .detail .detail-list .dynamic-con p:nth-child(2) a {
            font-size: 0.75rem;
            color: #979797
        }

        .detail .detail-list .dynamic-con > img {
            width: 100px;
            height: 100px
        }

        .detail .detail-list .dynamic-con .time {
            font-size: 0.75rem;
            color: #979797
        }

        .detail .detail-list .dynamic-con .time img {
            width: 10px;
        }
    </style>
</head>

<body class="detail">
<header id="header">
    <a href="index.html" class="iconfont fl">&#xe63f;</a>
    <div class="title"></div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content ">
    <div class="detail-title">
        <a href="#" class="head_pic fl"><img src="../images/img1.jpg"></a>
        <p class="title">圣诞主题</p>
        <a href="code.html"><img src="../skin/xhdpi/qrcode.png" alt="">分享二维码</a>
    </div>
    <div class="btn-group">
        <a href="#">关注</a>
        <a href="../find/release.html">+发布约拍</a>
    </div>
</div>
<div class="tabs fl">
    <div class="tabs-name">
        <a href="javascript:setTabs('simple-info')" id="simple-info">简介</a>
        <a href="javascript:setTabs('detail-list')" id="detail-list" class="actives">动态</a>
    </div>
    <div class="tabs-con">
        <div class="simple-info">
            <ul>
                <li>2017年11月8日07:21创建</li>
                <li>浏览关注人员（5人）</li>
                <li>汇总圣诞主题相关的约拍和作品相册</li>
                <li><span>创建人员</span>
                    <div class="imgtxt-list"><span class="author"><img src="../images/user_mini.png">sfjj</span></div>
                </li>
            </ul>
        </div>
        <div class="detail-list detail-show">
            <ul>
                <li class="city">
                    <span>全部</span>
                    <span>北京</span>
                    <span>上海</span>
                    <span>天津</span>
                    <span>重庆</span>
                    <span>广州</span>
                    <span>深圳</span>
                    <span>南京</span>
                    <span>杭州</span>
                </li>
                <li class="dynamic-info">
                    <div class="author">
                        <a href="model.html">
                            <img src="../images/user_mini.png">
                        </a>
                        <div class="account-name">Eugene <img src="../skin/xhdpi/sex_m.png" alt=""></div>
                        <div class="profession">模特</div>
                    </div>
                    <div class="dynamic-con">
                        <p><a href="">想拍一组圣诞照<span>(1)张</span></a></p>
                        <p><a href="">希望互免</a></p>
                        <img src="../images/img1.jpg">
                        <p class="time">
                            <a href="model.html">
                                <img src="../skin/xhdpi/mark_gray.png" alt="">
                                <span>上海 2017年12月22日14:34</span>
                            </a>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li class="active">
            <a class="camera" href="index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li>
            <a class="person" href="../user/user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
    function setTabs(id) {
        $(".actives").removeClass('actives');
        $(".detail-show").removeClass('detail-show');
        $("#" + id).toggleClass('actives');
        $("." + id).toggleClass('detail-show');
    }
</script>
</body>
</html>